<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>基于Ajax灾区物资运输管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <script src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-card" style="height: 550px;">
                <div class="layui-card-header">求助者部分详情</div>
                <div class="layui-card-body ">
                    <form class="layui-form">
                        <div class="layui-form-item">
                            <labelimgIds for="peopleName" class="layui-form-label">
                                <span class="x-red">*</span>求助者：</labelimgIds>
                            <label for="peopleName" class="layui-form-label" id="peopleName" style="text-align: left;"></label>
                        </div>
                        <div class="layui-form-item x-city" id="start">
                            <label class="layui-form-label"><span class="x-red">*</span>所在地：</label>
                            <label for="peopleAddress" class="layui-form-label" id="peopleAddress" style="text-align: left; width: 200px;"></label>
                        </div>
                        <div class="layui-form-item">
                            <label for="disasterType" class="layui-form-label">
                                <span class="x-red">*</span>灾难类型：</label>
                            <label for="disasterType" class="layui-form-label" id="disasterType" style="text-align: left; width: 200px;"></label>
                        </div>
                        <div class="layui-form-item">
                            <label for="demandType" class="layui-form-label">
                                <span class="x-red">*</span>需求类型：</label>
                            <label for="demandType" class="layui-form-label" id="demandType" style="text-align: left; width: 200px;"></label>
                        </div>
                        <div class="layui-form-item">
                            <label for="L_username" class="layui-form-label">
                                <span class="x-red">*</span>受灾图片：</label>
                            <div class="layui-upload-list" id="layui-upload-list">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="remark" class="layui-form-label">
                                <span class="x-red">*</span>求助备注：</label>
                            <label for="remark" class="layui-form-label" id="remark" style="text-align: left; width: 200px;"></label>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="layui-col-md6">
            <div class="layui-card" style="height: 550px;">
                <div class="layui-card-header">帮助者详情填写</div>
                <div class="layui-card-body ">
                    <form class="layui-form">
                        <input type="hidden" id="imgIds" name="imgIds">
                        <div class="layui-form-item">
                            <label for="helperRealName" class="layui-form-label">
                                <span class="x-red">*</span>帮助者：</label>
                            <label for="helperRealName" id="helperRealName" class="layui-form-label" style="text-align: left;"></label>
                        </div>
                        <div class="layui-form-item">
                            <label for="helperTel" class="layui-form-label">
                                <span class="x-red">*</span>联系方式：</label>
                            <label for="helperTel" id="helperTel" class="layui-form-label" style="text-align: left;"></label>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label"><span class="x-red">*</span>所在地：</label>
                            <label for="peopleAddress" id="helperAddress" class="layui-form-label" style="text-align: left; width: 200px;"></label>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label for="helpType" class="layui-form-label">
                                <span class="x-red">*</span>帮助类型：</label>
                            <div class="layui-input-block">
                                <textarea placeholder="请输入帮助类型" class="layui-textarea" id="helpType" name="helpType" lay-verify="required"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="L_username" class="layui-form-label">
                                <span class="x-red">*</span>物资图片：</label>
                            <div class="layui-input-inline">
                                <button type="button" class="layui-btn" id="test1">
                                    <i class="layui-icon">&#xe67c;</i>选择图片
                                </button>
                                <button type="button" class="layui-btn layui-btn-normal" id="testListAction">执行上传</button>
                            </div>
                            <div class="layui-upload-list" id="layui-upload-materails">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="L_username" class="layui-form-label"></label>
                            <button class="layui-btn" lay-filter="add" lay-submit="">提交</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/xcity.js"></script>
<script>
    layui.use(['form','code', 'upload', 'layer'], function(){
        form = layui.form;
        layer = layui.layer;
        layui.code();
        $('#start').xcity();
        var account = JSON.parse(window.sessionStorage.getItem("account"));
        var id = decodeURI(getQueryVariable("id")); // 获取物资ID

        $("#helperRealName").text(account.accountRealName);
        $("#helperTel").text(account.accountTel);
        $("#helperAddress").text(account.accountBirthplace);

        form.on('submit(add)', function(data) {
            if(data.field.imgIds === '') {
                layer.msg("请先上传图片");
                return false;
            }
            var btn = $(this);
            btn.text("提交中...").attr("disabled", "disabled").addClass("layui-disabled");
            $.ajax({
                url: './materials/editReceiveMaterialsById',
                type: 'post',
                data: {id: id, helperId: account.id, helpType: data.field.helpType, imgIds: data.field.imgIds},
                dataType: 'json',
                success: function(res) {
                    if(res.code === 200) {
                        btn.text("申请审核中")
                    }
                    layer.msg(res.msg, {time: 2000});
                },
                error: function() {
                    btn.text("提交").attr("disabled", false).removeClass("layui-disabled");
                    layer.msg('服务器异常...', {time: 1000});
                }
            })
            return false;
        })

        // 获取 - 物资详细 - id
        $.ajax({
            url: './materials/queryMaterialsById',
            data: {id: id},
            dataType: 'json',
            success: function(res) {
                $("#peopleName").text(res.data.peopleName);
                $("#peopleTel").text(res.data.peopleTel);
                $("#peopleAddress").text(res.data.peopleAddress);
                $("#disasterType").text(res.data.disasterType);
                $("#demandType").text(res.data.demandType);
                $("#helpType").text(res.data.helpType);
                $("#remark").text(res.data.remark);
                var imgs = res.data.disasterimgs;
                imgs.map(item=>{
                    $("#layui-upload-list").append('<img class="layui-upload-img" src="../'+ item.imgName +'" id="img1" style="object-fit: cover; width: 92px; height: 92px; margin-right: 5px;">');
                })
            },
            error: function(err) {
                layer.msg('服务器异常');
            }
        });

        // 上传物资图片
        var upload = layui.upload;
        var imgIds = [];
        var uploadInst = upload.render({
            elem: '#test1',
            url: './materialsimg/fileUpload',
            size: 1024,
            auto: false,
            multiple: true,
            number: 3,
            bindAction: '#testListAction',
            choose: function(obj) {
                this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                obj.preview(function(index, file, result) {
                    var img = '<img class="layui-upload-img" src="'+ result +'" id="img1" style="object-fit: cover; width: 92px; height: 92px; margin-right: 5px;">';
                    $('#layui-upload-materails').append(img);
                })
            },
            done: function(res) {
                if(res.code === 200) {
                    layer.msg(res.msg);
                    imgIds.push(res.data.join(""));
                    $("#imgIds").val(imgIds.join(","));
                }
            },
            error: function() {
                layer.msg(res.msg);
            }
        })
    });

    // decodeURI(getQueryVariable("u_name"))
    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) {
                return pair[1];
            }
        }
        return (false);
    }
</script>
</html>
